<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学业表现测评</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description"/>
    <meta content="Coderthemes" name="author"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- App favicon -->
    <link rel="shortcut icon" href="./assets/images/favicon.ico">

    <!-- App css -->
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/icons.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/app.css" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        .col-form-label-ljt{padding-top:calc(.55rem + 1px);padding-bottom:calc(.25rem + 1px);margin-left: 16px;margin-bottom:0;font-weight:bold;font-size:inherit;line-height:1.5;}
    </style>
</head>

<body>

<!-- Begin page -->
<div id="wrapper">

    <!-- ========== Left Sidebar Start ========== -->
    <div th:replace="commons/sideBar :: sidebar"/>
    <!-- Left Sidebar End -->


    <div class="content-page">
        <div class="content">

            <!-- Topbar Start -->
            <div th:replace="commons/topBar :: topbar "/>
            <!-- end Topbar -->

            <!-- Start Content-->
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                                    <li class="breadcrumb-item active">学业表现测评</li>
                                </ol>
                            </div>
                            <h4 class="page-title">专业技能</h4>
                        </div>
                    </div>
                </div>
                <!-- end page title -->
            </div>


            <!-- ============================================================== -->
            <!-- Start Page Content here -->
            <!-- ============================================================== -->
            <div class="">
                <div class="card-body">
                    <h4 class="mb-3 header-title">测评内容：</h4>

                    <form class="form-horizontal">
                        <button class="btn btn-info  " id="add_btn" style="margin-bottom: 10px">添加选项</button>
                        <div id="item">


                            <div class="form-group row mb-3 " >
                                <label  class=" col-form-label-ljt">加分项:</label>
                                <select name=""  class="form-control selItems"style="width: 200px;  height: 43px;margin-left: 15px" required></select>
                                <label  class=" col-form-label-ljt">级别:</label>
                                <select name="" class="form-control selLevels"style="width: 90px;  height: 43px;margin-left: 15px"  required> </select>
                                <label  class=" col-form-label-ljt">分值:</label>
                                <select disabled='disabled' name=""  class="form-control selPoints"style="width: 80px;  height: 43px;margin-left: 15px" required></select>
                                <label  class=" col-form-label-ljt">证明材料:</label>
                                <div style="width: 190px ;margin-left: 15px">
                                    <input type="file" class="form-control" style="width: 220px;">
                                </div><!--上传图片-->
                                <div style="margin-left: 45px;padding-top: 8px">
                                    <span class="badge badge-danger float-right" style="font-size: 12pt">未提交</span>
                                </div>
                                <div style="margin-left: 45px;padding-top: 8px">
                                    <i class="fe-trash-2" ></i>
                                </div>
                            </div><!--每一项-->

                        </div>


                        <div class="form-group row mb-3">
                            <label for="failedNum" class="col-2 col-form-label">小计：</label>
                            <div class="col-9">
                                <input class="form-control" id="failedNum" style="width: 220px;" placeholder="">
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label for="score" class="col-2 col-form-label">预计得分：</label>
                            <div class="col-9">
                                <input class="form-control" id="score" style="width: 220px;"
                                       placeholder="学业分总分（基本分减去扣分）">
                            </div>
                        </div>


                        <div class="form-group mb-0 justify-content-end row">
                            <div class="col-9">
                                <button type="submit" class="btn btn-info  ">提交</button>

                            </div>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->
</div>


<!-- Footer Start -->
<div th:replace="commons/footer :: foot"></div>
<!-- end Footer -->
<script src="./js/jquery-2.1.1.min.js"></script>

<script>
    $("#add_btn").click(function (e) {
        e.preventDefault();//阻止默认行为（表单提交）
        $("#item").append("<div class=\"form-group row mb-3 \" >\n" +
            "                                <label  class=\" col-form-label-ljt\">加分项:</label>\n" +
            "                                <select name=\"\"  class=\"form-control selItems\"style=\"width: 200px;  height: 43px;margin-left: 15px\" required></select>\n" +
            "                                <label  class=\" col-form-label-ljt\">级别:</label>\n" +
            "                                <select name=\"\" class=\"form-control selLevels\"style=\"width: 90px;  height: 43px;margin-left: 15px\"  required> </select>\n" +
            "                                <label  class=\" col-form-label-ljt\">分值:</label>\n" +
            "                                <select disabled='disabled' name=\"\"  class=\"form-control selPoints\"style=\"width: 80px;  height: 43px;margin-left: 15px\" required></select>\n" +
            "                                <label  class=\" col-form-label-ljt\">证明材料:</label>\n" +
            "                                <div style=\"width: 190px ;margin-left: 15px\">\n" +
            "                                    <input type=\"file\" class=\"form-control\" style=\"width: 220px;\">\n" +
            "                                </div><!--上传图片-->\n" +
            "                                <div style=\"margin-left: 45px;padding-top: 8px\">\n" +
            "                                    <span class=\"badge badge-danger float-right\" style=\"font-size: 12pt\">未提交</span>\n" +
            "                                </div>\n" +
            "                                <div style=\"margin-left: 45px;padding-top: 8px\">\n" +
            "                                    <i class=\"fe-trash-2\" ></i>\n" +
            "                                </div>\n" +
            "                            </div><!--每一项-->"

        )
        add_bind_op()

    }

    );

    // $(".fe-trash-2").click(function () {
    //     $(this).parent().parent().remove();
    // });
    // $(function () {
    //     $(".fe-trash-2").on('click',function () {
    //         $(this).parent().parent().remove();
    //     });
    // })
    $(document).delegate(".fe-trash-2","click",function(){
        $(this).parent().parent().remove();
    })


</script>


<!-- App js -->
<script src="./js/vendor.js"></script>
<script src="./js/app.js"></script>


<!-- Plugins js -->
<script src="./js/vendor/Chart.bundle.js"></script>
<script src="./js/vendor/jquery.sparkline.min.js"></script>
<script src="./js/vendor/jquery.knob.min.js"></script>

<script src="./js/pages/dashboard.init.js"></script>

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/professionalSelectLinkage.js"></script>

</body>
</html>